<template>
  <button class="v-radio" :checked="checked==value" ref="input" @click="hasParent?($parent.selected=value):$emit('input',value)">
    <div class="inner"></div>
    <label>{{label}}</label>
  </button>
</template>


<script>
export default {
  model: {
    prop: "selected"
  },
  props: {
    selected: null,
    value: null,
    label: {
      default: ""
    }
  },
  computed: {
    hasParent() {
      return this.$parent.$options._componentTag == "v-radio-group";
    },
    checked() {
      return this.hasParent ? this.$parent.selected : this.selected;
    }
  }
};
</script>


<style lang="less">
.v-radio {
  border: none;
  outline: none;
  padding: 0px;
  margin: 0px 5px;
  font-size: inherit;
  white-space: nowrap;
  background-color: #ffffff;
  > .inner {
    width: 10px;
    height: 10px;
    padding: 2px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid #cccccc;
    &::before {
      width: 100%;
      height: 100%;
      content: "";
      display: block;
      border-radius: 50%;
      background-color: transparent;
      transform: scale(0.5);
      transition: 300ms;
    }
  }
  > label {
    vertical-align: middle;
  }
  &[checked] {
    > .inner {
      border-color: #fab24c;
      &::before {
        transform: scale(1);
        background-color: #fab24c;
      }
    }
  }
}
</style>
